<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>拣货单详情</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/JsBarcode.all-3.3.20.min.js"></script>
    <script type="text/javascript">
        function myprint() {
            //直接调用浏览器打印功能
            bdhtml = window.document.body.innerHTML;
            //定义打印区域起始字符，根据这个截取网页局部内容
            sprnstr = "<!--startprint-->"; //打印区域开始的标记
            eprnstr = "<!--endprint-->";   //打印区域结束的标记
            prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
            prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
            window.document.body.innerHTML = prnhtml;
            //开始打印
            window.print();
            //还原网页内容
            window.document.body.innerHTML = bdhtml;
        }

        function barcodeGen() {
            var barvalue = $("#number").val();
            if (barvalue == "") {
                alert("请输入条形码字符串！！")
            } else {
                $("#bcode").JsBarcode(barvalue);
            }
        }

        $(function () {
            barcodeGen();
            $("#printOk").click(function () {
                //弹出打印
                myprint();
                var ids = [];
                ids.push($("#pid").val())
                //AJAX更新成已打印
                $.ajax({
                    url: "/ajax_stock_out/print_picking",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify({id: $("#pid").val()}),
                    success: function (res) {
                        // console.log("生成拣货单");
                        // console.log(res);
                        // if(res.code == 0){
                        //
                        //     window.location.reload();
                        // }else{
                        //     alert(res.msg);
                        // }
                    }
                });
            })
        })
    </script>
</head>
<body>
<!--startprint-->
<style type="text/css">
    .record-box {
        position: relative;
        width: 900px;
        min-height: 550px;
        padding: 0 5px;
        font-size: 13px;
        color: #787878;
    }

    .record-head {
        margin: -20px 0 80px 0;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
    }

    .record-head span {
        float: left;
    }

    .record-head i {
        float: right;
        font: normal 28px/30px Tahoma;
        cursor: pointer;
    }

    .record-code {
        position: absolute;
        left: 50%;
        top: 10px;
        margin-left: -110px;
        width: 220px;
        font-size: 14px;
        text-align: center;
    }

    /*.record-code img{width:100%;display:block;}*/
    .record-code span {
        line-height: 2;
    }

    .record-box h2 {
        font-weight: normal;
        font-size: 20px;
        margin-bottom: 20px;
    }

    .record-info {
        line-height: 40px;
        overflow: hidden;
    }

    .record-info span {
        float: left;
        width: 50%;
    }

    .record-info span:nth-child(1) {
        text-align: left;
    }

    .record-info span:nth-child(2) {
        text-align: right;
    }

    .record-table {
        min-height: 250px;
        overflow-y: auto;
    }

    .record-table table {
        width: 100%;
    }

    .record-table th, .record-table td {
        padding: 10px 0;
        font-size: 13px;
        text-align: center;
        border: 1px solid #787878;
    }

    .record-table th {
        padding: 5px 0;
    }

    /*.record-button {*/
    /*    position: absolute;*/
    /*    width: 100%;*/
    /*    left: 0;*/
    /*    bottom: 10px;*/
    /*    text-align: center;*/
    /*}*/

    .record-button a {
        border: 1px solid #787878;
        padding: 5px 15px;
        font-size: 14px;
        color: #787878;
    }

    ul li {
        list-style: none;
    }
</style>
<div class="record-box">
    <div class="record-head"><span></span><b></b></div>
    <div class="record-code"><img id="bcode"/></div>

    <h2>拣货单(<span th:text="${T(com.b2c.entity.erp.enums.StockOutFormStatusEnum).getName(pick.status)}"></span>)</h2>
    <div class="record-info">
        <input type="hidden" id="number" th:value="${pick.stockOutNo}"/>
        <input type="hidden" id="pid" th:value="${pick.id}"/>
        <span>单据编号：<i id="r-number" th:text="${pick.stockOutNo}">CG190411100335401</i></span>
        <span>单据生成时间：<i id="r-time">[[${pick.createTime}]]</i></span>

    </div>
    <div class="record-info">
        <span></span>
        <span>
            <div class="record-button"><a href="javascript:;" id="printOk">打印</a></div>
        </span>
    </div>
    <div class="record-table">
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>商品</th>
                <th>规格</th>
                <th>SKU</th>
                <th>数量</th>
<!--                <th>对应订单号</th>-->
                <th th:if="${pick.status == 0 || pick.status == 1 }" >所在仓位</th>
                <th th:if="${pick.status > 1 }">拣货仓位</th>
                <th>拣货状态</th>
            </tr>
            </thead>
            <tbody id="r-table">
            <tr th:each="item:${goods}">
                <td th:text="${itemStat.index+1}"></td>
                <td style="text-align: left">
<!--                    <span th:text="${item.goodsName}"></span>-->
                    <img style="width: 50px;height: 50px;" th:src="${item.colorImage}" />
                </td>
                <td>
                    颜色：<span th:text="${item.colorValue}"></span>&nbsp;
                    尺码：<span th:text="${item.sizeValue}"></span>
                </td>
                <td style="text-align: left" th:text="${item.skuNumber}"></td>
                <td th:text="${item.quantity}">2</td>
<!--                <td style="text-align: left" th:text="${item.orderNum}">2</td>-->
                <td style="text-align: left">
                    <ul th:if="${pick.status == 0 || pick.status == 1 }">
                        <li th:each="it:${item.stocks}" >
                            <span th:text="${it.locationName}"></span>&nbsp;
                            &nbsp;<span>当前库存：<b th:text="${it.currentQty}"></b></span>
                            <span>锁定库存：<b th:text="${it.lockedQty}"></b></span>
                        </li>
                    </ul>
                    &nbsp;&nbsp;<span th:if="${pick.status > 1 }" th:text="${item.locationName}"></span>&nbsp;&nbsp;
<!--                    <span th:text="${item.reservoirName}"></span>&nbsp;&nbsp;-->
<!--                    <span th:text="${item.shelfName}"></span>-->
                </td>
                <td>
                    <span style="color: red" th:text="${T(com.b2c.erp.enums.EnumErpOrderSendStatus).getName(item.status)}"></span>
                </td>
            </tr>


            </tbody>
        </table>
    </div>

</div>
<!--endprint-->

</body>
</html>